<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>原神</button>
    <button>云原神</button>
    <button>崩铁</button>
    <button>云崩铁</button>
    <button>绝区零</button>
    <script>
      // 获取所有button元素
      const btns = document.querySelectorAll("button");

      // 遍历每个button元素，为其添加点击事件
      btns.forEach((item) => {
        // 初始化按钮样式：去除边框，设置默认填充
        item.style.color = "";
        item.style.border = "none";
        item.style.padding = "10px";

        // 当button被点击时，执行回调函数
        item.addEventListener("click", () => {
          // 当一个button被点击时，先清除所有button的文字颜色
          btns.forEach((item) => {
            item.style.color = "";
            item.style.border = "none";
            item.style.padding = "10px";
          });
          // 然后将被点击的button文字颜色设置为红色，以达到仅高亮当前点击按钮的效果
          item.style.color = "red";
          item.style.border = "1px solid black";
          item.style.padding = "15px";
        });
      });
    </script>
  </body>
</html>
